<template>
  <screenContainer>
    <div class="board-box ant-board">
      <div class="r1">
        <div class="r1-item">月用电量：<span>{{ pageData.monthSortData.elec ? pageData.monthSortData.elec.value :
          0 }}</span>&nbsp;KWh</div>
        <div class="r1-item">月用水量：<span>{{ pageData.monthSortData.water ? pageData.monthSortData.water.value :
          0 }}</span>&nbsp;T</div>
        <div class="r1-item">月用气量：<span>{{ pageData.monthSortData.gas ? pageData.monthSortData.gas.value :
          0 }}</span>&nbsp;m³</div>
      </div>
      <div class="r2">
        <div class="c1">
          <box4 title="全厂电力系统-昨日消耗排行">
            <div class="block-main">
              <div class="block-absolute progress-box">
                <Progress v-for="item in pageData.topFiveData.elec" :key="item.name" :text="item.name"
                  :value="item.value" :unit="'KWh'" :percent="item.value * 100 / pageData.topFiveMax.elec"
                  strokeColor="rgb(149, 242, 4)"></Progress>
              </div>

            </div>
          </box4>
          <box4 title="全厂供水系统-昨日消耗排行" class="m_200">
            <div class="block-main">
              <div class="block-absolute progress-box">
                <Progress v-for="item in pageData.topFiveData.water" :key="item.name" :text="item.name"
                  :value="item.value" :unit="'T'" :percent="item.value * 100 / pageData.topFiveMax.water"
                  strokeColor="#02A7F0"></Progress>
              </div>

            </div>
          </box4>
          <box4 title="全厂燃气系统-昨日消耗排行" class="m_200">
            <div class="block-main">
              <div class="block-absolute progress-box">
                <Progress v-for="item in pageData.topFiveData.gas" :key="item.name" :text="item.name"
                  :value="item.value" :unit="'m³'" :percent="item.value * 100 / pageData.topFiveMax.gas"
                  strokeColor="#EC808D"></Progress>
              </div>
            </div>
          </box4>
        </div>
        <div class="c2">
          <box5 title="全厂电力系统-近7天用量">
            <div class="block-main" id="elecSeven"></div>
          </box5>
          <div class="c2-bottom">
            <box5 title="全厂供水系统-近7天用量">
              <div class="block-main" id="waterSeven">
              </div>
            </box5>
            <box5 title="全厂燃气系统-近7天用量">
              <div class="block-main" id="gasSeven">
              </div>
            </box5>
          </div>
        </div>
        <div class="c3">
          <box4 title="全厂电力系统-月度用量">
            <div class="block-main" id="elecMonth">
            </div>
          </box4>
          <box4 title="全厂供水系统-月度用量">
            <div class="block-main" id="waterMonth"> </div>
          </box4>
          <box4 title="全厂燃气系统-月度用量">
            <div class="block-main" id="gasMonth"> </div>
          </box4>
        </div>
      </div>

    </div>
  </screenContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, watchEffect, reactive } from 'vue';
import screenContainer from '../compNew/boadrContainer.vue';
import Corner from '../comp/corner.vue';
import useLine from './useLine';
import useBar from './useBar';
import useLineBar from './useLineBar';
import Progress from '../comp/progress.vue';
import * as Api from '@/api/dataBoard/index.ts';
import useData from './useData';
import box4 from '../compNew/box4.vue'
import box5 from '../compNew/box5.vue'
import { useAlarmInfo } from '@/hooks/web/useAlarmInfo'

let fullDom = '.page-box';
let isMobile = false;
const loading = ref(true);
const pageData = useData();

useAlarmInfo({ deviceTypes: ['Water', 'Ammeter', 'Gas'] });

useLineBar({
  id: 'elecSeven',
  data: pageData.sevenTrendData,
  key: 'elec'
});
useLine({
  id: 'waterSeven',
  data: pageData.sevenTrendData,
  color: '#02A7F0',
  key: 'water',
  yname: '单位：T'
});
useLine({
  id: 'gasSeven',
  data: pageData.sevenTrendData,
  color: '#EC808D',
  key: 'gas',
  yname: '单位：m³'
});

useBar({
  id: 'elecMonth',
  color: 'rgb(149, 242, 4)',
  data: pageData.monthTrendData,
  key: 'elec',
  yname: `Kwh * 10^4`
});
useBar({
  id: 'waterMonth',
  color: '#02A7F0',
  data: pageData.monthTrendData,
  key: 'water',
  yname: 'T * 10^4'
});
useBar({
  id: 'gasMonth',
  color: '#EC808D',
  data: pageData.monthTrendData,
  key: 'gas',
  yname: 'm³ * 10^4'
});
setTimeout(() => {
  loading.value = false;
}, 1500);
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.board-box {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  overflow: hidden;



  .r1 {
    display: flex;
    flex-shrink: 0;
    margin-bottom: 2vh;
    gap: 2vh;

    .r1-item {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      width: 33vh;
      height: 8vh;
      padding: 3vh 2vh;
      border: 1px solid rgb(0 255 255);
      background: linear-gradient(90deg,
          rgb(9 19 44) 0%,
          rgb(9 19 44) 39%,
          rgb(9 55 79) 100%,
          rgb(9 55 79) 100%);
      color: rgb(220 176 24);
      font-size: 2vh;
      font-weight: 600;

      span {
        font-size: 2.8vh;
      }
    }
  }

  .r2 {
    display: flex;
    flex-grow: 1;
  }

  .c1 {
    display: grid;
    grid-row-gap: 1vh;
    grid-template-rows: 5fr 3fr 3fr;
    flex-shrink: 0;
    width: 25%;
  }

  .c2 {
    display: grid;
    grid-row-gap: 2vh;
    grid-template-rows: 1fr 1fr;
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0 2vh;
  }

  .c3 {
    display: grid;
    grid-row-gap: 1vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    flex-shrink: 0;
    width: 25%;
  }

  .block-title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4vh;
    color: #fff;
    font-size: 1.6vh;
    line-height: 4vh;
    text-align: center;
  }

  .block-main {
    position: relative;
    height: 100%;

    .block-absolute {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .progress-box {}
  }

  .c2-bottom {
    display: grid;
    grid-column-gap: 1vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
  }
  @media screen and (max-width: 800px) {
    min-height: 100%;
    padding-bottom: 20px;
    overflow-y: auto;

    .r1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;

      .r1-item {
        margin: 10px auto;
      }
    }

    .r2 {
      display: block;
    }

    .c1 {
      display: block;
      width: 100%;
    }

    .board-box-4 {
      height: 33vh;
    }

    .m_200 {
      height: 25vh;
    }

    .c2 {
      display: block;
      margin: 0 10px;
    }

    .board-box-5 {
      height: 40vh;
      margin-top: 20px;
    }

    .c2-bottom {
      display: block;
    }

    .c3 {
      width: 100%;
      padding-top: 30px;
    }
  }
}
</style>
